<!-- 修改密码 -->
<template>
    <uni-nav-bar title="用户信息" :statusBar="true" fixed :border="false" leftIcon="left"
                 backgroundColor="#4BA9FB" color="#FFFFFF" @clickLeft="commonUtils.finish">
    </uni-nav-bar>

    <!-- 表单内容 -->
    <view class="cellContent">
        <u-form labelPosition="left" :model="formData" :rules="rules" ref="form1" labelWidth="70">
            <u-form-item label="旧密码" prop="formData.oldPassword" :borderBottom="true">
                <u-input v-model="formData.oldPassword" border="none" placeholder="请输入旧密码"
                         clearable>
                </u-input>
            </u-form-item>
            <u-form-item label="新密码" prop="formData.newPassword" :borderBottom="true">
                <u-input v-model="formData.newPassword" border="none" placeholder="请输入新密码"
                         clearable>
                </u-input>
            </u-form-item>
        </u-form>
    </view>

    <!-- 修改按钮 -->
    <view class="btnLayout">
        <view class="commit" @click="onModifyClick">确认修改</view>
    </view>
</template>

<script setup>
import {reactive} from 'vue';
import {modifyPasswordRequest} from "@/net/Api";
import commonUtils from "@/utils/commonUtils";

const formData = reactive({
    oldPassword: '',
    newPassword: '',
})

/**
 * 修改密码
 */
const onModifyClick = () => {
    if (!formData.oldPassword) {
        uni.showToast({
            title: '请输入旧密码',
            icon: "none"
        })
        return
    }
    if (!formData.newPassword) {
        uni.showToast({
            title: '请输入新密码',
            icon: "none"
        })
        return
    }
    let params = {
        "oldPassword": formData.oldPassword,
        "newPassword": formData.newPassword,
    }
    uni.showLoading()
    modifyPasswordRequest(params).then((res) => {
        uni.hideLoading()
        uni.showToast({
            title: '修改成功',
        })
        setTimeout(() => {
            uni.reLaunch({
                url: '/pages/login/login',
            })
        }, 500)
    }).catch((err) => {
        uni.hideLoading()
    })
}

</script>

<style scoped lang="scss">
.btnLayout {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.commit {
    width: 70%;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background-color: $themeColor;
    color: #FFFFFF;
    border-radius: 40rpx;
    font-size: 30rpx;
    margin-top: 100rpx;
}

.cellContent {
    width: 100%;
    box-sizing: border-box;
    background-color: #FFFFFF;
}

.avatarTxt {
    width: 145rpx;
    margin: 0 0 0 30rpx;
    font-size: 32rpx;
    color: #333333;
    text-align: justify;
}

.avatarContent {
    display: flex;
    background-color: #FFFFFF;
    padding: 30rpx 0;
}

.avatar {
    width: 150rpx;
    height: 150rpx;
}

:deep(.u-form-item__body) {
    padding: 24rpx 30rpx !important;
}
</style>